<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bower_components/semantic/dist/semantic.css">
    <style>
        .main.container{
            padding-top: 50px;
        }
    </style>
</head>
<body>
<div class="ui inverted fixed menu">
    <div class="header item">Tutorial</div>
</div>
<div class="ui main container" id="app">
    <a :href="link+'/test'" :title="message"> {{ message }} </a>
    <br>

    <input class="input" type="text" :value="message">
    <br>
    <input class="input" type="text" v-model="message">
    <br>

    <input class="input" type="checkbox" v-model="success">


    <div class="ui success message" v-if="success">
        <i class="close icon" @click="close"></i>
        <p>
            {{ message }}
        </p>
    </div>
    <div class="ui error message" v-else>
        <p>
            错误提示
        </p>
    </div>

    <!--动态样式 1-->
    <div class="ui message" :class="success ? 'success' : 'error'">
        <i class="close icon" @click="close"></i>
        <p>
            {{ message }}
        </p>
    </div>

    <!--动态样式 2-->
    <div class="ui message" :class="{success: success, error: !success}">
        <i class="icon close" @click="close"></i>
        <p>
            {{ message }}
        </p>
    </div>

    <!--动态样式 3-->
    <div class="ui message" :style="{background: color}">
        <i class="icon close" @click="close"></i>
        <p>
            {{ message }}
        </p>
    </div>

    <!--动态样式 4-->
    <div class="ui message" :style="style">
        <i class="icon close" @click="close"></i>
        <p>
            {{ message }}
        </p>
    </div>

    <!--动态样式 5-->
    <div class="ui message" :style="style()">
        <i class="icon close" @click="close"></i>
        <p>
            {{ message }}
        </p>
    </div>


    <!--动态样式 6 checkbox用法-->
    <input type="checkbox" v-model="cls" :true-value="'success'" :false-value="'error'">
    <div class="ui message" :class="cls">
        <i class="icon close" @click="close"></i>
        <p>
            {{ message }}
        </p>
    </div>

    <!--列表渲染-->
    <ul>
        <li v-for="person in persons">{{ person }}</li>
    </ul>

</div>



<script src="bower_components/vue/dist/vue.js"></script>
<script src="js/app_lesson2.js"></script>

</body>
</html>